import React, { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import {
  NavBar,
  Collapse,
  Input,
  Button,
  Tag,
  Popup,
  Steps,
} from "antd-mobile";
import request from "../../api/request";
import { DownFill, StopOutline } from "antd-mobile-icons";
import "./index.css";
import dayjs from "dayjs";
function Index() {
  const { Step } = Steps;
  const { state } = useLocation();
  const navigate = useNavigate();
  const [value, setValue] = useState("");
  const [visible5, setVisible5] = useState(false);
  const [data, setdata] = useState([]);
  const [list, setlist] = useState([]);
  const start = "北京";
  const end = "三亚";
  const getdata = async () => {
    const res = await request.get("/api/trip/airplane", {
      params: {
        start,
        end,
      },
    });
    console.log(res);
    if (res.data.code === 200) {
      setlist(res.data.data);
    }
  };
  useEffect(() => {
    getdata();
  }, []);
  const add = () => {
    setdata([...data, value]);
    setValue("");
  };
  const edit = () => {
    setVisible5(true);
  };
  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>
        <div className="www">
          <div className="aaa">
            <span>{dayjs().format("MM-DD")}</span>
            &emsp;
            <span>{dayjs().format("dddd")}</span>
            <span>
              <DownFill onClick={edit} />
            </span>
          </div>
        </div>
      </NavBar>
      <div className="box">
        <div className="left">
          <div>
            <p>{state.dst}</p>
            <p>{state.aat}</p>
            <p>{state.ast}</p>
          </div>
          <div>
            <p>{state.dasn}</p>
            <p>{state.td}</p>
            <p>{state.aasn}</p>
          </div>
          <div>
            <p>二等座 {state.it == 1 ? "有票" : `${state.it}张`}</p>
            <p>一等座 {state.it == 1 ? "有票" : `${state.it}张`}</p>
            <p>特等座 {state.it == 1 ? "有票" : `${state.it}张`}</p>
          </div>
        </div>
        <div className="regit">
          <p>{state.lps[0].sp}￥</p>
        </div>
      </div>
      <div className="price">
        <p>有票方案 ￥ {state.lps[0].sp}</p>
        <p>二等座 &emsp;￥{state.lps[0].sp * 2}</p>
        <p>一等座 &emsp;￥{state.lps[0].sp * 3}</p>
        <p>商务座 &emsp;￥{state.lps[0].sp * 4}</p>
      </div>
      <h4>二等票已售完,为您找到以下方案</h4>
      <div className="Bu">
        <p>北京南</p>
        <p>----</p>
        <p>二等座</p>
        <p>----</p>
        <p>补四站</p>
        <p>宿州东</p>
        <p>下车</p>
      </div>
      <Collapse accordion>
        <Collapse.Panel
          arrow={(active) =>
            active ? (
              <span className="yyy">订票</span>
            ) : (
              <span className="yyy">订票</span>
            )
          }
          key="1"
          title={<span className="iii">￥333</span>}
        >
           <div><span>出行无忧</span> <span className="ooo" onClick={()=>navigate('/paylist')}>抢</span> </div>
        </Collapse.Panel>
        <Collapse.Panel
          arrow={(active) =>
            active ? (
              <span className="yyy">订票</span>
            ) : (
              <span className="yyy">订票</span>
            )
          }
          key="2"
          title={<span className="iii">￥333</span>}
        >
          <div><span>出行无忧</span> <span className="ooo" onClick={()=>navigate('/paylist')}>抢</span> </div>
        </Collapse.Panel>
        <Collapse.Panel
          arrow={(active) =>
            active ? (
              <span className="yyy">订票</span>
            ) : (
              <span className="yyy">订票</span>
            )
          }
          key="3"
          title={<span className="iii">￥333</span>}
        >
           <div><span>出行无忧</span> <span className="ooo" onClick={()=>navigate('/paylist')}>抢</span> </div>
        </Collapse.Panel>
      </Collapse>
      <div>
        <h4>您愿意推荐好友来同城旅行预定火车票吗？</h4>
        <div className="Ping">
          <span>0</span>
          <span>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>5</span>
          <span>6</span>
          <span>7</span>
          <span>8</span>
          <span>9</span>
          <span>10</span>
        </div>
        <h3>不推荐我要吐槽</h3>

        <p>
          <Input
            placeholder="请输入内容"
            value={value}
            onChange={(val) => {
              setValue(val);
            }}
          />
          <Button block color="primary" size="large" onClick={add}>
            提交
          </Button>
          <p>
            {data.length > 0 &&
              data.map((item, index) => {
                return (
                  <Tag style={{ margin: 5 }} key={index}>
                    {item}
                  </Tag>
                );
              })}
          </p>
        </p>
      </div>
      <Popup
        visible={visible5}
        onMaskClick={() => {
          setVisible5(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "80vh",
        }}
      >
        <div>
          <div className="center">
            <span className="span">G101时刻表</span>
            <span className="span1">
              <StopOutline onClick={() => setVisible5(false)} />
            </span>
          </div>
          <div className="lists">
            <p>车站名称</p>
            <p>到达</p>
            <p>出发</p>
            <p>停留</p>
          </div>
          <div>
            <Steps direction="vertical">
              {list.length > 0 &&
                list.map((item, index) => {
                  return (
                    <Step
                    key={index}
                      title={
                        <div className="lll">
                            <p>{item.dasn}</p>
                             <p>{item.ast}</p>
                              <p>{item.dst}</p>
                               <p>{item.it}分钟</p>
                        </div>
                      }
                      status='finish'
                    />
                  );
                })}
            </Steps>
          </div>
        </div>
      </Popup>
    </div>
  );
}

export default Index;
